<template>
	<view class="">
		<u-navbar title="技师入驻" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
		<template v-if="check_state == -1">
			<view class="p-30" style="padding-bottom: 180rpx;">
				<u-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0" errorType="toast">
					<view class="title mb-30">
						基本信息
					</view>
					<view class="card p-30" style="padding-top: 0;">
						<u-form-item label=" " prop="staff_name">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									头像
								</view>
								<view class="">
									<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
										multiple :maxCount="1" multiple width="40" height="40">
										<image :src="add" mode="widthFix" style="width: 40px;height: 40px;"></image>
									</u-upload>
								</view>
							</view>
						</u-form-item>
						<u-form-item label=" " prop="name">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									花名
								</view>
								<view class="">
									<u-input v-model="form.name" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
						<u-line color="#F6F6F6"></u-line>
						<u-form-item label=" " prop="city">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									选择城市
								</view>
								<view class="" @click="pickerShow = true">
									<u-icon size="18" name="arrow-right" labelPos="left"
										:label="form.city == '' ? '选择城市' : form.city"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-line color="#F6F6F6"></u-line>
						<u-form-item label=" " prop="age">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									年龄（岁）
								</view>
								<view class="">
									<u-input v-model="form.age" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
						<u-line color="#F6F6F6"></u-line>
						<u-form-item label=" " prop="height">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									身高（cm）
								</view>
								<view class="">
									<u-input v-model="form.height" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
						<u-line color="#F6F6F6"></u-line>
						<u-form-item label=" " prop="weight">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									体重（kg）
								</view>
								<view class="">
									<u-input v-model="form.weight" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
						<u-form-item label=" " prop="figure">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									身材
								</view>
								<view class="">
									<u-input v-model="form.figure" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
						<u-form-item label=" " prop="character">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									性格
								</view>
								<view class="">
									<u-input v-model="form.character" border="none"></u-input>
								</view>
							</view>
						</u-form-item>

					</view>

					<view class="title mb-30 mt-30 flex-row align-center">
						<view class="">
							服务项目
						</view>

						<view class=" small-size" style="color: #FF7D00;">
							（*勾选的项目必须要有，最少一项）
						</view>
					</view>
					<view class="card p-30">
						<u-form-item label=" ">
							<view class="tag">
								<view class="tag-item" @click.stop="tagClick(index)" :class="{'active':item.checked}"
									v-for="(item,index) in serveData1">
									{{item.name}}
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="title mb-30 mt-30 flex-row align-center">
						<view class="">
							主推项目
						</view>

						<view class=" small-size" style="color: #FF7D00;">
							（*勾选的项目必须要有，最少一项）
						</view>
					</view>
					<view class="card p-30">
						<u-form-item label=" ">
							<view class="tag">
								<view class="tag-item" @click.stop="tagClick1(index)" :class="{'active':item.checked}"
									v-for="(item,index) in serveData2">
									{{item.name}}
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="title mb-30 mt-30 flex-row align-center">
						<view class="">
							联系信息
						</view>
					</view>
					<view class="card p-30">
						<u-form-item label=" " prop="address">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									详细地址
								</view>
								<view class="">
									<u-input v-model="form.address" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
						<u-line color="#F6F6F6"></u-line>
						<u-form-item label=" " prop="mobile">
							<view class="flex-row justify-between align-center w-full">
								<view class="">
									联系方式
								</view>
								<view class="">
									<u-input type="text" v-model="form.mobile" placeholder="请输入手机号或者微信号" border="none"></u-input>
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="title mb-30 mt-30 flex-row align-center">
						<view class="">
							照片
						</view>
						<view class="small-size">
							（第一张将作为封面展示）
						</view>
					</view>
					<view class="card p-30">
						<view class="flex-row ">
							<view>
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="1"></u-upload>
								<view class="text-center mt-10 small-size">添加图片</view>
							</view>
						</view>
					</view>
				<!-- 	<view class="title mb-30 mt-30 flex-row align-center">
						<view class="">
							视频
						</view>
						<view class="small-size">
							（选填）
						</view>
					</view>
					<view class="card p-30">
						<view class="flex-row">
							<view>
								<u-upload accept="media" :capture="['camera']" :fileList="fileList1"
									@afterRead="afterRead" @delete="deletePic" name="1" multiple
									:maxCount="1"></u-upload>
								<view class="text-center mt-10 small-size">添加视频</view>
							</view>
						</view>
					</view> -->
				</u-form>
			</view>
			<view class="submit" @click="submit">
				<u-button :loading="loading" :color="$u.color.color" shape="circle" text="提交入驻"></u-button>
			</view>
		</template>
		<template v-else-if="check_state == 0">
			<view>审核中</view>
		</template>
		<template v-else-if="check_state == 1">
			<view>已同意</view>
		</template>
		<template v-else-if="check_state == 2">
			<view>已拒绝</view>
			<view @click="apply">重新申请</view>
		</template>

		<u-picker :show="pickerShow" ref="uPicker" :loading="pickerLoading" :columns="columns" @change="changeHandler"
			keyName="name" @confirm="pickerConfirm" @cancel="pickerShow = false"></u-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		staffApply,
		staffCheckState
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				pickerLoading: false,
				pickerShow: false,
				check_state: -1,
				loading: false,
				fileList1: [],
				fileList2: [],
				serveData1: [],
				serveData2: [],
				form: {
					avatar: '',
					name: "",
					service_ids: [],
					service1_ids: [],
					height: "",
					weight: "",
					age: "",
					figure: "",
					city: "",
					character: "",
					starttime: "",
					endtime: "",
					address: "",
					mobile: "",
					image: "",
					attachfile: "",
				},
				rules: {
					avatar: {
						type: 'string',
						required: true,
						message: '请输入头像',
						trigger: ['blur', 'change']
					},
					name: {
						type: 'string',
						required: true,
						message: '请输入花名',
						trigger: ['blur', 'change']
					},
					height: {
						type: 'string',
						required: true,
						message: '请输入身高',
						trigger: ['blur', 'change']
					},
					weight: {
						type: 'string',
						required: true,
						message: '请输入体重',
						trigger: ['blur', 'change']
					},
					age: {
						type: 'string',
						required: true,
						message: '请输入年龄',
						trigger: ['blur', 'change']
					},
					figure: {
						type: 'string',
						required: true,
						message: '请输入身材',
						trigger: ['blur', 'change']
					},
					character: {
						type: 'string',
						required: true,
						message: '请输入性格',
						trigger: ['blur', 'change']
					},
					city: {
						type: 'string',
						required: true,
						message: '请选择城市',
						trigger: ['blur', 'change']
					},
					mobile: [{
							required: true,
							message: '请输入联系方式',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		// uni.$u.test.mobile()就是返回true或者false的
						// 		return uni.$u.test.mobile(value);
						// 	},
						// 	message: '联系方式不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change', 'blur'],
						// }
					],
					address: {
						type: 'string',
						required: true,
						message: '请输入联系地址',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		computed: {
			...mapState(["serveData"]),
		},
		onLoad(e) {
			// this.getStaff();
			this.serveData1 = JSON.parse(JSON.stringify(this.serveData));
			this.serveData1 = this.serveData1.map(item => {
				item.checked = false
				return item
			});
			this.serveData2 = JSON.parse(JSON.stringify(this.serveData));
			this.serveData2 = this.serveData2.map(item => {
				item.checked = false
				return item
			})
			console.log(e.attachfile)
			if (e.attachfile) this.form.attachfile = e.attachfile
		},
		methods: {
			apply() {
				this.check_state = -1;
			},
			getStaff() {
				staffCheckState().then(res => {
					console.log('staffDetail', res);
					if (res.check_state) {
						this.check_state = res.check_state;
					} else {
						this.check_state = -1;
					}
				})
			},
			tagClick(index) {
				this.serveData1 = this.serveData1.map((v, i) => {
					if (index == i) v.checked = !v.checked
					return v;
				})
				// this.serveData1[index].checked = !this.serveData1[index].checked
				// console.log(this.serveData1[index]);
			},
			tagClick1(index) {
				this.serveData2 = this.serveData2.map((v, i) => {
					if (index == i) v.checked = !v.checked
					return v;
				})
			},
			submit() {
				let vm = this;

				this.$refs.form.validate().then(res => {
					vm.loading = true;
					let service_ids = this.serveData1.filter(v => v.checked);
					if (service_ids.length == 0) {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请选择擅长项目',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					} else {
						this.form.service_ids = service_ids.map(v => {
							return v.id
						});
						this.form.service_ids = this.form.service_ids.toString();
					}

					let service1_ids = this.serveData2.filter(v => v.checked);
					if (service1_ids.length == 0) {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请选择主推项目',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					} else {
						this.form.service1_ids = service1_ids.map(v => {
							return v.id
						});
						this.form.service1_ids = this.form.service1_ids.toString();
					}
					if (this.fileList2.length != 0) {
						this.form.avatar = this.fileList2[0]['url']
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请上传头像',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					}
					if (this.fileList1.length != 0) {
						this.form.image = this.fileList1[0]['url']
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请上传图片',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					}

					staffApply(this.form).then(res => {
						console.log('res', res);
						vm.$refs.uToast.show({
							type: 'success',
							message: '提交成功，请等待管理员审核...',
							complete() {
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/index'
								})
							}
						})
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					vm.loading = false;
				})
			},
			pickerConfirm(e) {
				this.form.city = e.value[0]['name'] + '/' + e.value[1]['name'] + '/' + e.value[2]['name']
				this.pickerShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;


		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>